<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>
	   White Folio - intense, emotive, white portfolio. 
    </title>
 
    <meta name="author" content="Sara Presenti for Your Inspiration Web [http://www.yourinspirationweb.com] " />
    <meta name="keywords" content="" />
 	<meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <!-- CSS -->
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
	
	 <!-- FAVICON -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	<link rel="icon" type="image/x-icon" href="favicon.ico" />
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/verticalscroller.js"></script>
	<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
	<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
	<script type="text/javascript" src="js/contact_form.js"></script>
	
	<!-- We only want the thunbnails to display when javascript is disabled -->
	<script type="text/javascript" src="js/noscript.js"></script>
	
</head>
<body>
	<!-- CONTAINER -->
	<div class="container">

		<!-- PORTFOLIO  -->
		<div id="portfolio">
			<!-- LOGO + NAV  -->
			<div class="logo" id="top">
				<img src="images/logo.gif" alt="logo" />
			</div>
			
			<div class="TopNavigation">
				<ul class="nav">
					<li class="inicio"><a href="index.html">Inicio</a></li>
					<li class="login"><a href="login.html">Login</a></li>
					<li class="compras active">Compras</li>
					<li class="publicaciones"><a href="publicaciones.html">Publicaciones</a></li>
				</ul>
			</div>
			<!-- END LOGO + NAV  -->

			<h2>Portfolio</h2>
			
			<p>
				In questa pagina puoi inserire una gallery dei lavori che hai realizzato o, in alternativa, una semplice ed elegante
				gallery fotografica.
			</p>
	
			<!-- PORTFOLIO GALLERY -->
			<div id="gallery" class="content">
				
				<div class="slideshow-container">
					<div id="loading" class="loader"></div>
					<div id="slideshow" class="slideshow"></div>
				</div>
	
				<div id="caption" class="caption-container"></div>
			</div>
	
			<div id="thumbs" class="navigation">
				<ul class="thumbs noscript">
					<li>
						<a class="thumb" href="images/portfolio/005.big.jpg" title="Title #0">
							<img src="images/portfolio/005.small.jpg" alt="Title #0" />
						</a>
						<div class="caption">
							<div class="image-title">My Brochure</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/002.big.jpg" title="Title #1">
							<img src="images/portfolio/002.small.jpg" alt="Title #1" />
						</a>
						<div class="caption">
							<div class="image-title">My Portfolio</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/003.big.jpg" title="Title #2">
							<img src="images/portfolio/003.small.jpg" alt="Title #2" />
						</a>
						<div class="caption">
							<div class="image-title">Work #1</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/004.big.jpg" title="Title #3">
							<img src="images/portfolio/004.small.jpg" alt="Title #3" />
	
						</a>
						<div class="caption">
							<div class="image-title">Work #2</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/001.big.jpg" title="Title #4">
							<img src="images/portfolio/001.small.jpg" alt="Title #4" />
						</a>
						<div class="caption">
							<div class="image-title">Work #3</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>		
						</div>
					</li>
	
					<li>
	
						<a class="thumb" href="images/portfolio/006.big.jpg" title="Title #5">
							<img src="images/portfolio/006.small.jpg" alt="Title #5" />
						</a>
						<div class="caption">
							<div class="image-title">Work #4</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/007.big.jpg" title="Title #6">
							<img src="images/portfolio/007.small.jpg" alt="Title #6" />
						</a>
						<div class="caption">
							<div class="image-title">Work #5</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/002.big.jpg" title="Title #7">
							<img src="images/portfolio/002.small.jpg" alt="Title #7" />
						</a>
						<div class="caption">
							<div class="image-title">Work #6</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/003.big.jpg" title="Title #8">
							<img src="images/portfolio/003.small.jpg" alt="Title #8" />
	
						</a>
						<div class="caption">
							<div class="image-title">My Business Card</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/004.big.jpg" title="Title #9">
							<img src="images/portfolio/004.small.jpg" alt="Title #9" />
						</a>
						<div class="caption">
							<div class="image-title">My Business Card</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
	
						<a class="thumb" href="images/portfolio/005.big.jpg" title="Title #10">
							<img src="images/portfolio/005.small.jpg" alt="Title #10" />
						</a>
						<div class="caption">
							<div class="image-title">My Business Card</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/006.big.jpg" title="Title #11">
							<img src="images/portfolio/006.small.jpg" alt="Title #11" />
						</a>
						<div class="caption">
							<div class="image-title">My Business Card</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
	
					<li>
						<a class="thumb" href="images/portfolio/003.big.jpg" title="Title #12">
							<img src="images/portfolio/003.small.jpg" alt="Title #12" />
						</a>
						<div class="caption">
							<div class="image-title">My Business Card</div>
							<div class="image-desc">Inserisci qui una breve descrizione del progetto di cui sopra.</div>
						</div>
					</li>
				</ul>
			</div>
			<!-- END THUMB -->
	
			<div style="clear: both;"></div>
			
			<h3>Testimonials</h3>
			
			<p class="quote">
				E' stato un piacere lavorare con Tizia, si e' dimostrata molto professionale e al tempo stesso creativa, curiosa, vivace.
				Il logo che mi ha progettato e' praticamente perfetto e mi rappresenta esattamente come desideravo. [ Ilenia Consalvo ]
			</p>
			
			<p class="quote">
				Tizia e' stata molto disponibile e attenta e mi ha messa subito a mio agio. Ha saputo capire quale proposta grafica era
				piu indicata alle mie esigenze e il risultato e' stato a dir poco sorprendente. Consiglio a tutti di affidarsi con
				completa fiducia a Tizia. [ <a href="#">Rita Covarrubias</a> ]
			</p>	
			
		</div>
		<!-- END PORTFOLIO GALLERY -->
	
		<!-- FOOTER  -->
		<p class="footer">
			Copyright &copy; 2012 Socrates Team. All Rights Reserved.
		</p>
		<!-- END FOOTER -->
		
	</div>
	<!-- END CONTAINER -->

								
	<script type="text/javascript">
	jQuery(document).ready(function($) {
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '300px', 'float' : 'left'});
		$('div.content').css('display', 'block');

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		var gallery = $('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 15,
			preloadAhead:              10,
			enableTopPager:            true,
			enableBottomPager:         true,
			maxPagesToShow:            7,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 false,
			syncTransitions:           true,
			enableKeyboardNavigation:  false,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});
	});
	</script>

</body>
</html>